<template>
  <div id="userInfo">
    <div id="option">
      <router-link
        :to="{
          path: '/userInfo',
          query: { username: this.$route.query.username, msg: 1 },
        }"
      >
        ta的资料
      </router-link>
      <div @click="getMyProducts">
        <router-link
          :to="{
            path: '/userInfo',
            query: { username: this.$route.query.username, msg: 2 },
          }"
        >
          ta的商品
        </router-link>
      </div>
      <div @click="getMyNeeds">
        <router-link
          :to="{
            path: '/userInfo',
            query: { username: this.$route.query.username, msg: 3 },
          }"
        >
          ta的需求
        </router-link>
      </div>
    </div>

    <!-- <div id="myProfile" v-if="this.$route.query.msg == 1">
            <div id="info">
                <img src="../assets/img/head.png" alt="">
                <div id="name">zj</div>
                <div id="sig">
                    <i class="el-icon-male" style="color: skyblue"></i>
                    <i class="el-icon-female" style="color: pink"></i>
                    <span>本来无一物，何处惹尘埃</span>
                </div>
            </div>
            <div id="tradeinfo">
                <span>我的电话：12345678890</span>
                <span>我的评分：9.82</span>
                <span>交易总数：12</span>
            </div>
        </div> -->

    <div id="myProfile" v-if="this.$route.query.msg == 1">
      <div id="info">
        <img :src="myProfile.image" alt="" />
        <div id="name">{{ myProfile.username }}</div>
        <div id="sig">
          <i
            class="el-icon-male"
            style="color: skyblue"
            v-if="myProfile.sex == 1"
          ></i>
          <i class="el-icon-female" style="color: pink" v-else></i>
          <span>{{ myProfile.signature }}</span>
        </div>
      </div>
      <div id="tradeinfo">
        <span>ta的电话：{{ myProfile.phone }}</span>
        <span>ta的评分：{{ myProfile.point }}</span>
        <span>已售商品：{{ myProfile.buyerNum }}</span>
      </div>
    </div>

    <div id="myProducts" v-if="this.$route.query.msg == 2">
      <div class="title">
        <i class="el-icon-star-on"></i>
        <span>ta的商品</span>
        <i class="el-icon-star-on"></i>
      </div>
      <div class="showpro">
        <productBrief
          v-for="item in myProducts"
          :key="item.index"
          :image="item.image"
          :name="item.name"
          :price="item.price"
          :sellername="item.sellerUsername"
          :id="item.id"
        ></productBrief>
        <!-- <productBrief
                v-for="item in 10"
                :key="item.index"
                image="https://img13.360buyimg.com/jdcms/s300x300_jfs/t1/178661/28/3905/138182/609d39a7Eb1a7b045/c6f860d88ffe3ffd.jpg.webp"
                name="百草味 冰雪蛋糕540g/箱
                        网红饼干糕点点心整箱早餐手撕小面包麻薯夹心糯米糍"
                price="99.9"
                sellername="百草味官方旗舰店"
                id="3"
                ></productBrief> -->
      </div>
    </div>

    <div id="myNeeds" v-if="this.$route.query.msg == 3">
      <div class="title">
        <i class="el-icon-star-on"></i>
        <span>ta的需求</span>
        <i class="el-icon-star-on"></i>
      </div>
      <div id="showneed">
        <need
          v-for="item in myNeeds"
          :key="item.index"
          :image="item.image"
          :username="item.username"
          :needTime="item.time"
          :description="item.description"
        ></need>
      </div>
      <!-- <div id="showneed">
                <need 
                v-for="item in 5" 
                :key="item.index"
                :image="item.image"
                :username="item.username"
                :needTime="item.needTime"
                :description="item.description"
                ></need>
            </div> -->
    </div>
  </div>
</template>

<script>
import need from "../components/need.vue";
import productBrief from "../components/productBrief.vue";
import { request } from "../network/request";

export default {
  components: {
    need,
    productBrief,
  },
  data() {
    return {
      myProfile: "",
      myProducts: "",
      myNeeds: "",
    };
  },
  methods: {
    getMyProducts() {
      request({
        url: "/userInfo",
        method: "get",
        params: {
          type: 2,
          username: this.$route.query.username,
        },
      }).then((res) => {
        console.log(res);
        this.myProducts = res.data.products;
      });
    },
    getMyNeeds() {
      request({
        url: "/userInfo",
        method: "get",
        params: {
          type: 3,
          username: this.$route.query.username,
        },
      }).then((res) => {
        console.log(res);
        this.myNeeds = res.data.needs;
      });
    },
  },
  created() {
    request({
      url: "/userInfo",
      method: "get",
      params: {
        type: 1,
        username: this.$route.query.username,
      },
    }).then((res) => {
      this.myProfile = res.data;
      console.log(res);
    });
  },
};
</script>

<style scoped>
#userInfo {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: #fff;
}

#option {
  background-color: rgb(232, 232, 232);
  margin: 20px;
  display: flex;
  justify-content: space-around;
  height: 50px;
  line-height: 50px;
}

#myProfile {
  display: flex;
  justify-content: space-around;
  height: 270px;
  background-color: #fff;
}

#info,
#tradeinfo {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}

#myProfile img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid #ebebeb;
  overflow: hidden;
}

#tradeinfo {
  font-weight: bold;
}

#info img {
  margin: 0 auto;
}

#info div {
  text-align: center;
}

.title {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  padding-top: 25px;
  padding-bottom: 20px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  width: 200px;
}

.title i {
  padding: 5px;
}

.showpro {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
</style>